<template>
  <el-row :gutter="20" class="main-wrapper">
    <el-col :span="12">
      <div class="box_2">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        <el-row style="margin-top: 18px;">
          <el-col :span="12">
            <p class="label">{{curOpt}}岗位供给</p>
            <div class="value" v-if="data2" v-show="jz3">{{data2.PostNumber}}</div>
             <animae-jz  class="value" v-if="!jz3"></animae-jz>
          </el-col>
          <el-col :span="12">
            <p class="label">岗位供给环比{{Number(data2.Increase>=0)?'增加':'减少'}}</p>
            <div class="value" v-if="data2" v-show="jz4">{{Math.abs(data2.Increase)}}</div>
             <animae-jz  class="value" v-if="!jz4"></animae-jz>
          </el-col>
        </el-row>
      </div>
    </el-col>
	<el-col :span="12">
	      <div class="box_2">
	        <span></span>
	        <span></span>
	        <span></span>
	        <span></span>
	    <el-row style="margin-top: 18px;">
	      <el-col :span="12">
	        <p class="label">{{curOpt}}用人需求</p>
	        <div class="value" v-if="data1" v-show="jz">{{data1.UserCount}}</div>
	         <animae-jz  class="value" v-if="!jz"></animae-jz>
	      </el-col>
	      <el-col :span="12">
	        <p class="label">用人需求环比{{Number(data1.Increase)>=0?'增加':'减少'}}</p>
	        <div class="value" v-if="data1" v-show="jz2">{{Math.abs(data1.Increase)}}</div>
	         <animae-jz  class="value" v-if="!jz2"></animae-jz>
	      </el-col>
	    </el-row>
	  </div>
	</el-col>
<!-- 	<el-col :span="12">
	      <div class="box_2">
	        <span></span>
	        <span></span>
	        <span></span>
	        <span></span>
	    <el-row style="margin-top: 18px;">
	      <el-col :span="12">
	        <p class="label">{{curOpt}}入场人数</p>
	        <div class="value" v-if="data1" v-show="jz">{{data1.UserCount}}</div>
	         <animae-jz  class="value" v-if="!jz"></animae-jz>
	      </el-col>
	      <el-col :span="12">
	        <p class="label">入场人数环比{{Number(data1.Increase)>=0?'增加':'减少'}}</p>
	        <div class="value" v-if="data1" v-show="jz2">{{Math.abs(data1.Increase)}}</div>
	         <animae-jz  class="value" v-if="!jz2"></animae-jz>
	      </el-col>
	    </el-row>
	  </div>
	</el-col> -->
  </el-row>
</template>
<script>
import { get_JobTable_UserCount, get_JobTable_PostsNumber } from '@/api/data'
export default {
  data() {
    return {
      data1: null,
      data2: null,
      jz:true,
      jz2:true,
      jz3:true,
      jz4:true,
    }
  },
  props: ['height','dateProp','curOpt'],
  computed: {},
  mounted() {
    this.$nextTick(_=>{
      this.init();
    })
  },
  methods: {
    init(){
      this.jz=false
      this.jz2=false
      this.jz3=false
      this.jz4=false
      get_JobTable_UserCount(this.dateProp)
      .then(({data:{data}})=>{
        this.data1 = data[0]
        this.jz=true
      this.jz2=true
      })
      get_JobTable_PostsNumber(this.dateProp)
      .then(({data:{data}})=>{
        this.data2 = data[0]
      this.jz3=true
      this.jz4=true
      })
    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
  .main-wrapper /deep/ .el-col
    height 100%
    text-align center
  .label
    color #ffffff
  .value
    color #8ebafb
    font-size 24px
    margin-top 10px
    font-weight bold
</style>